<script setup>
import {onMounted, ref} from 'vue';
import {ElMessage, ElMessageBox} from "element-plus";

const queryInfo = ref({
    pageNo: 1,
    pageSize: 10,
    id: "",
    hash_id: "",
    username: "",
    phone: "",
    email: "",
    invite_code: "",
    vip_level: ""
});

const viplevels = ref([
    {
        label: "注册会员",
        value: 1
    },
    {
        label: "初级会员",
        value: 2
    },
    {
        label: "中级会员",
        value: 3
    },
    {
        label: "高级会员",
        value: 4
    }
])

// 时间范围
const member_range = ref([]);
const register_range = ref([]);

// 时间快捷选项 输出格式为  date 00:00:00 - date 23:59:59
const shortcuts = [
    {
        text: '今天',
        value: () => {
            const end = new Date();
            const start = new Date();
            start.setHours(0, 0, 0, 0);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '昨天',
        value: () => {
            const today = new Date();
            const yesterday = new Date(today);
            yesterday.setDate(yesterday.getDate() - 1);
            const start = new Date(yesterday);
            start.setHours(0, 0, 0, 0);
            const end = new Date(yesterday);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近一周',
        value: () => {
            const today = new Date();
            const oneWeekAgo = new Date(today);
            oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
            const start = new Date(oneWeekAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近一月',
        value: () => {
            const today = new Date();
            const oneMonthAgo = new Date(today);
            oneMonthAgo.setMonth(oneMonthAgo.getMonth() - 1);
            const start = new Date(oneMonthAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
    {
        text: '最近三月',
        value: () => {
            const today = new Date();
            const threeMonthsAgo = new Date(today);
            threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
            const start = new Date(threeMonthsAgo);
            start.setHours(0, 0, 0, 0);
            const end = new Date(today);
            end.setHours(23, 59, 59, 999);
            return [start, end];
        },
    },
];

const dataList = ref([]);
const total = ref(0);
const showEditDialog = ref(false);
const editForm = ref({});


// 获取数据
const getDataList = () => {
    if (member_range.value.length > 0) {
        queryInfo.value.member_start = member_range.value[0];
        queryInfo.value.member_end = member_range.value[1];
    }
    if (register_range.value.length > 0) {
        queryInfo.value.register_start = register_range.value[0];
        queryInfo.value.register_end = register_range.value[1];
    }
    customerList(queryInfo.value).then((res) => {
        if (res.code === 200) {
            dataList.value = res.data.list;
            total.value = res.data.total || 0;
        } else {
            ElMessage.error(res.msg);
        }
    }).catch((err) => {
        console.log(err);
    });
}

// 重置数据
const resetDataList = () => {
    member_range.value = [];
    register_range.value = [];
    queryInfo.value = {
        pageNo: 1,
        pageSize: 10,
        id: "",
        hash_id: "",
        username: "",
        phone: "",
        email: "",
        invite_code: "",
        vip_level: ""
    };
    getDataList();
}

// 编辑弹框
const editRow = (row)=>{
    editForm.value = row;
    showEditDialog.value = true;
}

// 编辑数据
const editData = async() => {
    try {
        const res = await customerUpdate(editForm.value);
        if (res.code === 200) {
            ElMessage.success("更新成功");
            showEditDialog.value = false;
            getDataList();
        } else {
            ElMessage.error(res.msg);
        }
    } catch (err) {
        console.error(err);
        ElMessage.error("更新异常");
    }
}

// 删除数据
const deleteById = async (id) => {
    const confirmResult = await ElMessageBox.confirm(
        "此操作将永久删除该记录, 是否继续?",
        "提示",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    ).catch((err) => err);

    if (confirmResult === "confirm") {
        customerDelete(id).then((res) => {
            if (res.code === 200) {
                getDataList();
                ElMessage.success("删除成功");
            } else {
                ElMessage.error("删除失败");
            }
        }).catch((err) => {
            console.log(err);
            ElMessage.error("删除异常");
        });
    }
}

const handleSizeChange = (newSize) => {
    queryInfo.value.pageSize = newSize;
    getDataList();
}

const handleCurrentChange = (newPage) => {
    queryInfo.value.pageNo = newPage;
    getDataList();
}

// 加载数据
onMounted(() => {
    getDataList();
})
</script>

<template>
    <el-container class="el-container-fix">
        <el-header height="80">
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-input
                        placeholder="请输入编号"
                        v-model="queryInfo.id"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>编号</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="哈希编号"
                        v-model="queryInfo.hash_id"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>哈希编号</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入用户名"
                        v-model="queryInfo.username"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>用户名</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入手机号"
                        v-model="queryInfo.phone"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>手机号</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入邮箱"
                        v-model="queryInfo.email"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>邮箱</template>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-input
                        placeholder="请输入邀请码"
                        v-model="queryInfo.invite_code"
                        clearable
                        @clear="getDataList"
                        @keydown.enter="getDataList"
                    >
                        <template #prepend>邀请码</template>
                    </el-input>
                </el-col>
            </el-row>
            <el-row :gutter="20" class="mt-2">
<!--                <el-col :span="3">-->
<!--                    <el-select-->
<!--                        placeholder="请选择会员等级"-->
<!--                        v-model="queryInfo.vip_level"-->
<!--                        clearable-->
<!--                        @clear="getDataList"-->
<!--                    >-->
<!--                        <el-option-->
<!--                            v-for="item in viplevels"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value"-->
<!--                        ></el-option>-->
<!--                    </el-select>-->
<!--                </el-col>-->
                <el-col :span="6">
                    <el-date-picker
                        v-model="register_range"
                        :shortcuts="shortcuts"
                        type="datetimerange"
                        start-placeholder="注册开始时间"
                        end-placeholder="注册结束时间"
                        format="YYYY/MM/DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                    ></el-date-picker>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="getDataList">
                        查询
                    </el-button>
                    <el-button type="info" @click="resetDataList">
                        重置
                    </el-button>
                </el-col>
            </el-row>
        </el-header>

        <el-main>
            <el-table
                :data="dataList"
                height="600"
                ref="filterTable"
                :border="true"
                stripe
            >
                <el-table-column prop="id" label="id" width="80"></el-table-column>
                <el-table-column prop="hash_id" label="哈希ID"></el-table-column>
                <el-table-column prop="username" label="用户名"></el-table-column>
                <el-table-column prop="avatar" label="头像" width="100">
                    <template #default="scope">
                        <el-image :src="scope.row.avatar" alt="avatar"
                                  style="width: 50px;height: 50px;border-radius: 50%;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="手机"></el-table-column>
                <el-table-column prop="email" label="邮箱"></el-table-column>
                <el-table-column prop="invite_code" label="邀请码" width="90"></el-table-column>
                <el-table-column prop="balance" label="积分" width="80"></el-table-column>
                <el-table-column prop="vip_level" label="会员等级">
                    <template #default="scope">
                        <el-tag v-if="scope.row.vip_level === 1" type="info">注册会员</el-tag>
                        <el-tag v-else-if="scope.row.vip_level === 2" type="primary">初级会员</el-tag>
                        <el-tag v-else-if="scope.row.vip_level === 3" type="success">中级会员</el-tag>
                        <el-tag v-else-if="scope.row.vip_level === 4" type="warning">高级会员</el-tag>
                        <el-tag v-else-if="scope.row.vip_level === 5" type="danger">顶级会员</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="create_at" label="注册时间"></el-table-column>
                <el-table-column label="操作" width="200">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="primary"
                            icon="Edit"
                            @click="editRow(scope.row)"
                        >编辑
                        </el-button>
                        <el-button
                            size="small"
                            type="danger"
                            icon="Delete"
                            @click="deleteById(scope.row.hash_id)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>

        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryInfo.pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="queryInfo.pageSize"
                :total="total"
                layout="total,prev, pager, next,jumper,sizes"
            >
            </el-pagination>
        </el-row>
    </el-container>

    <!--编辑用户-->
    <el-dialog title="编辑用户" v-model="showEditDialog" width="500px" @close="showEditDialog=false">
        <el-form :model="editForm" label-width="100px" ref="editFormRef">
            <el-form-item label="会员等级">
                <el-select
                    placeholder="请选择等级"
                    v-model="editForm.vip_level"
                >
                    <el-option
                        v-for="item in viplevels"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="会员到期时间" prop="create_time">
                <el-date-picker
                    v-model="editForm.vip_expire"
                    type="datetime"
                    placeholder="选择会员到期时间"
                    format="YYYY/MM/DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                ></el-date-picker>
            </el-form-item>
        </el-form>
        <template #footer class="dialog-footer">
            <el-button type="primary" @click="editData">确 定</el-button>
            <el-button @click="showEditDialog = false">取 消</el-button>
        </template>
    </el-dialog>
</template>

<style scoped>
.el-container-fix {
    width: 98%;
    margin: auto;
    padding: 20px 0;
}

.mt-2 {
    margin: 20px 0;
}
</style>